<template>
  <div class="tr">
    <div class="tr-top">
      <div class="left">
        <div class="itm"><el-button @click="addEv">新增</el-button></div>
      </div>
      <div class="right">
        <div class="itm"> <el-input clearable v-model="tableObjData.label__like" style="width: 240px"
            placeholder="输入名称" /></div>
        <div class="itm"><el-button @click="getEv(true)">查询</el-button></div>
      </div>
    </div>
    <div class="table-content">
      <el-table empty-text="暂无数据" border height="100%" :data="tableListData">
        <el-table-column align="center" type="index" label="#" width="50" />
        <el-table-column align="center" header-align="center" prop="label" label="名称" width="150" />
        <el-table-column align="center" header-align="center" prop="value" label="字典" width="150" />
        <el-table-column align="center" header-align="center" prop="sort" label="排序" width="100" />
        <el-table-column align="center" header-align="center" prop="create_time" label="创建时间" width="180" />
        <el-table-column align="center" header-align="center" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="updateSelRowEv(scope.row)">
              修改
            </el-button>
            <el-popconfirm placement="left-end" width="220" confirm-button-text="删除" cancel-button-text="取消"
              icon-color="#626AEF" confirm-button-type="text" title="是否确认永久是删除此数据" @confirm="deleteSelRowEv(scope.row)">
              <template #reference>
                <el-button link type="primary" size="small">删除</el-button>
              </template>
            </el-popconfirm>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <pagination v-show="tableObjData.total > 0" :total="tableObjData.total" v-model:page="tableObjData.page"
      v-model:limit="tableObjData.pageSize" @pagination="getEv(true)" />
    <!-- 新增和修改数据 -->
    <el-dialog v-model="dialogVisible" :title="isAdd == true ? '新增' : '修改'" width="400" :before-close="handleClose">
      <div>
        <div class="dialog-content">
          <div class="left">名称</div>
          <div class="right"><el-input @change="$forceUpdate()" v-model="editData.label" style="width: 240px"
              placeholder="" /></div>
        </div>
        <div class="dialog-content">
          <div class="left">字典</div>
          <div class="right"><el-input @change="$forceUpdate()" v-model="editData.value" style="width: 240px"
              placeholder="" /></div>
        </div>
        <div class="dialog-content">
          <div class="left">排序</div>
          <div class="right"><el-input-number @change="$forceUpdate()" v-model="editData.sort" style="width: 240px" />
          </div>
        </div>
        <div class="dialog-content">
          <div class="left">备注</div>
          <div class="right"><el-input type="textarea" :rows="1" @change="$forceUpdate()" v-model="editData.rem1"
              style="width: 240px" placeholder="" /></div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogSuerEv()">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { DictListGet, DictListPost, DictPkGet, DictPkPut, DictPkDelete } from '@/api/setting/dict/index.js'
import { ref, reactive, onMounted, onActivated } from 'vue'
import { loadingStore } from '@/stores/index.js'

const loading = loadingStore()
let tableListData = ref([])
let isAdd = ref(true)
let dialogVisible = ref(false)
let tableObjData = reactive({
  label__like: '',
  page: 1,
  total: 0,
  has_next: false,
  has_prev: false,
  pages: 0,
  pageSize: 20
})
let editData = reactive({
  sort: 10
})
onMounted(() => {
  getEv(false)
})
onActivated(() => {

})
const addEv = () => {
  dialogVisible.value = true
  isAdd.value = true
}
// 查询数据
const getEv = async (msg) => {
  loading.loading = true
  try {
    let arr_data = await DictListGet(tableObjData)
    if (arr_data.status != 200) {
      return
    }
    if (msg == true) {
      ElMessage.success('查询成功')
    }
    tableListData.value = arr_data.data.result.data
    tableObjData.total = arr_data.data.result.total
    tableObjData.has_next = arr_data.data.result.has_next
    tableObjData.has_prev = arr_data.data.result.has_prev
    tableObjData.pages = arr_data.data.result.pages
    tableObjData.pageSize = arr_data.data.result.pageSize

  } catch (error) {
    ElMessage.error('查询接口请求失败' + error)
  } finally {
    loading.loading = false
  }
}
// 修改数据
const updateSelRowEv = async (row) => {
  loading.loading = true
  try {
    let arr_data = await DictPkGet(row.id)
    if (arr_data.status != 200) {
      return
    }
    isAdd.value = false
    dialogVisible.value = true
    editData.id = arr_data.data.result.id
    editData.label = arr_data.data.result.label
    editData.value = arr_data.data.result.value
    editData.rem1 = arr_data.data.result.rem1
    editData.sort = arr_data.data.result.sort
  } catch (error) {
    ElMessage.error('获取单个数据接口请求失败' + error)
  } finally {
    loading.loading = false
  }
}
// 修改数据
const updateRowEv = async () => {
  loading.loading = true
  try {
    let arr_data = await DictPkPut(editData, editData.id)
    if (arr_data.status != 200) {
      return
    }
    await getEv(false)
    ElMessage.success('修改成功')
  } catch (error) {
    ElMessage.error('修改接口请求失败' + error)
  } finally {
    loading.loading = false
  }
}

// 新增数据
const addDataEv = async () => {
  loading.loading = true
  try {
    if ('id' in editData) {
      delete editData.id
    }
    let arr_data = await DictListPost(editData)
    if (arr_data.status != 200) {
      return
    }
    await getEv(false)
    ElMessage.success('新增成功')
  } catch (error) {
    ElMessage.error('新增接口请求失败' + error)
  } finally {
    loading.loading = false
  }
}

// 删除数据
const deleteSelRowEv = async (row) => {
  loading.loading = true
  try {
    let arr_data = await DictPkDelete(row.id)
    if (arr_data.status != 200) {
      return
    }
    await getEv(false)
    ElMessage.success('删除成功')
  } catch (error) {
    ElMessage.error('删除接口请求失败' + error)
  } finally {
    loading.loading = false
  }
}
// 关闭出发事件
const handleClose = (done) => {
  isAdd.value = true
  editData.id = ''
  editData.label = ''
  editData.value = ''
  editData.rem1 = ''
  editData.sort = 0
  done()
}
// 弹窗确认事件
const dialogSuerEv = async () => {
  if (isAdd.value == true) {
    console.log('新增数据')
    await addDataEv()
  } else {
    console.log('修改数据')
    await updateRowEv()
  }
  dialogVisible.value = false
  isAdd.value = true
  editData.id = ''
  editData.label = ''
  editData.value = ''
  editData.rem1 = ''
  editData.sort = 0
}

</script>

<style lang='less' scoped>
.tr {
  height: 100%;
}

.tr-top {
  height: var(--tr-top-height);
  display: flex;
  align-items: center;
  justify-content: space-between;

  .right {
    display: flex;
    align-items: center;
  }

  .itm {
    padding-right: 4px;
    box-sizing: border-box;
  }
}

.table-content {
  height: calc(100% - var(--tr-top-height) - var(--tr-page-height));
}

.dialog-content {
  display: flex;
  align-items: center;
  height: 40px;

  .left {
    width: 60px;
    text-align: right;
    padding-right: 5px;
    box-sizing: border-box;
  }
}
</style>